<template>
  <div class="main ">
   
    <div id="sangshentu"></div>
      <div id="ConDiv"></div>
   
  </div>
</template>
<script>
import * as echarts from "echarts";
import { echartsApi as ds } from "@/services";
export default {
  data() {
    return {
      ArrayPie: [],
      pieOption: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [],
          },
        ],
      },
      zhuiOption: {
        grid: {
          top: 10,
          bottom: 20,
        },
        xAxis: [
          {
            name: "基因座/等位基因",
            data: [],
            axisLabel: {
              color: "blur",
              fontSize: 14,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "峰面积",
            nameTextStyle: {
              color: "#5C7BD9",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#5C7BD9",
              },
            },
            axisLabel: {
              color: "#8CB5E2",
            },
          },
        ],
        // 使用内部缩放（滚轮缩放、鼠标拖着左右滑动）
        dataZoom: [
          {
            type: "inside",
            minValueSpan: 6, // 最小展示数
            start: 0, // 开始展示位置（默认）
            end: 5, // 结束展示位置 （默认）
          },
        ],
        series: [
          {
            name: "hill",
            // 象柱形图
            type: "pictorialBar",
            // 同一系列的柱间距离
            barGap: "2%",
            // 自定义svg 图标 (三角锥形的关键)
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            // 默认样式
            itemStyle: {
              label: {
                show: false,
              },
              color: "rgb(113,169,255)",
              borderWidth: 2,
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(113,169,255)",
                  },
                  {
                    offset: 1,
                    color: "rgb(113,169,255)",
                  },
                ],
              },
            },
     emphasis: {
              label: {
                show: true,
                position: "top",
                color: "#12DCFF",
              },
              itemStyle: {
                borderColor: "#17cdfa",
                borderWidth: 2,
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,238,255, 0.09)",
                    },
                    {
                      offset: 1,
                      color: "rgba(23,205,250, 0.5)",
                    },
                  ],
                },
              },
            },
            data: [60, 18, 12, 23, 56],
            z: 10,
          },
          {
            name: "hill",
            // 象柱形图
            type: "pictorialBar",
            // 同一系列的柱间距离
            barGap: "3%",
            // 自定义svg 图标 (三角锥形的关键)
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            // 默认样式
            itemStyle: {
              label: {
                show: false,
              },
              borderColor: "#41FF02",
              borderWidth: 2,
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "#41FF02",
                  },
                  {
                    offset: 1,
                    color: "#41FF02",
                  },
                ],
              },
            },
            // 鼠标滑过样式
            emphasis: {
              label: {
                show: true,
                position: "top",
                color: "#12DCFF",
              },
              itemStyle: {
                borderColor: "#17cdfa",
                borderWidth: 2,
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,238,255, 0.09)",
                    },
                    {
                      offset: 1,
                      color: "rgba(23,205,250, 0.5)",
                    },
                  ],
                },
              },
            },
            data: [10, 12, 1, 25, 56],
            z: 10,
          },
          {
            name: "hill",
            // 象柱形图
            type: "pictorialBar",
            // 同一系列的柱间距离
            barGap: "4%",
            // 自定义svg 图标 (三角锥形的关键)
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            // 默认样式
            itemStyle: {
              label: {
                show: false,
              },
              color: "rgb(255,220,96)",
              borderWidth: 2,
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(255,220,96)",
                  },
                  {
                    offset: 1,
                    color: "rgb(255,220,96)",
                  },
                ],
              },
            },
                   emphasis: {
              label: {
                show: true,
                position: "top",
                color: "#12DCFF",
              },
              itemStyle: {
                borderColor: "#17cdfa",
                borderWidth: 2,
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,238,255, 0.09)",
                    },
                    {
                      offset: 1,
                      color: "rgba(23,205,250, 0.5)",
                    },
                  ],
                },
              },
            },
            data: [60, 18, 12, 23, 56],
            z: 10,
          },
        ],
      },
    };
  },
  created() {
    this.$nextTick(function() {
      this.pietu();
      this.zhuizhuangtu();
    });
  },
    mounted(){
      window.addEventListener('resize', this.pietu);
      window.addEventListener('resize', this.zhuizhuangtu);
  },
  methods: {
    pietu() {
      ds.queryLocusOfComNumber({}).then((res) => {
        if (res.retcode == "success") {
            console.log('res：',res.data);
            
          let ArrayPie = [
            { value: res.data.unknownRatio, name: "未知" },
              // { value: res.data.oneRatio, name: "1人份" },
              { value: res.data.twoRatio, name: "2人份" },
              { value: res.data.threeRatio, name: "3人份" },
              { value: res.data.fourRatio, name: "4人份" },
          ];
         
          this.pieOption.series[0].data = ArrayPie;
          const chartDom = document.querySelector("#sangshentu");
        echarts.init(chartDom).setOption(this.pieOption);
        }
      });




    },
    zhuizhuangtu() {
      ds.queryLocusOfAlleleInfos({}).then((res) => {
        if (res.retcode == "success") {
          res.data.forEach((item) => {
            this.zhuiOption.xAxis[0].data.push(item.locusName);
            
            this.zhuiOption.series[0].data.push(item.alleleListVO[0]?.peakArea);
            this.zhuiOption.series[1].data.push(item.alleleListVO[1]?.peakArea);
            this.zhuiOption.series[2].data.push(item.alleleListVO[2]?.peakArea);
            console.log(this.zhuiOption.xAxis[0]);
            
          });
          const conDom = document.querySelector("#ConDiv");
          this.zhuiOption&&echarts.init(conDom).setOption(this.zhuiOption,true);
          
        }
      });
    
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  padding: 20px;
  // display: flex;
  // justify-content: center;
}
#sangshentu {
  width: 100%;
  height: 200px;
}
#ConDiv {
  width: 100%;
  height: 400px;
}
</style>
